@extends('Admin.layout.layout')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('css/plugins/webuploader/webuploader.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/demo/webuploader-demo.css">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>品牌列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="" class="btn btn-sm btn-success "><i class="fa fa-refresh"></i> 刷新</a>
                                <button type="button" class="btn btn-sm btn-primary fr"> 搜索</button>
                                <div class="input-group fr10">
                                    <input type="text" placeholder="名称" class="input-sm form-control">
                                </div>
                                <a class="btn btn-sm btn-primary fr10"data-toggle="modal" data-target="#myModal">新增</a>
                                <!-- <a class="btn btn-sm btn-primary "  data-toggle="modal" data-target="#myModal">新增</a> -->
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                            <thead>
                                <tr>
                                    <th width="15">
                                        <!-- <input type="checkbox" class="checkall" name="selectall" /> -->
                                    </th>
                                    <th>ID</th>
                                    <th>Logo</th>
                                    <th>BANNER图片</th>
                                    <th>名称</th>
                                    <th>厂家代码</th>
                                    <th>首字母</th>
                                    <th>排序</th>
                                    <th>创建时间</th>
                                    <th class="center">更新时间</th>
                                    <th class="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="no-records-found center"><td colspan="11">没有找到匹配的记录</td></tr>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="checkall" name="checkBox" />
                                    </th>
                                    <td>1</td>
                                    <td><img width="60" src="{{asset('img/p1.jpg')}}"></td>
                                    <td><img width="60" src="{{asset('img/p1.jpg')}}"></td>
                                    <td class="center">小耳朵</td>
                                    <td class="center">V10597</td>
                                    <td class="center">X</td>
                                    <td class="center">321</td>
                                    <td class="center">2018-01-10 14:27:01</td>
                                    <td class="center">2018-01-10 14:27:01</td>
                                    <td class="center">
                                        <a href="" class="btn-xs btn-primary " data-id="2" data-toggle="modal" data-target="#editModal">编辑</a>
                                        <a class="btn-xs btn-danger del" data-id="1">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" aria-controls="editable" tabindex="0" id="editable_previous">
                                            <a href="#">上一页</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">1</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">2</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">3</a>
                                        </li>
                                        <li class="paginate_button active" aria-controls="editable" tabindex="0">
                                            <a href="#">4</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">5</a>
                                        </li>
                                        <li class="paginate_button " aria-controls="editable" tabindex="0">
                                            <a href="#">6</a>
                                        </li>
                                        <li class="paginate_button next" aria-controls="editable" tabindex="0" id="editable_next">
                                            <a href="#">下一页</a>
                                        </li>
                                        <li>&nbsp;&nbsp;共437页，到第&nbsp;&nbsp;<input type="text" class="g-input">&nbsp;页&nbsp;<input type="button" onclick="" value="确定" class="btn btn-sm btn-primary"></input></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    创建品牌列表
                </h4>
            </div>
            <form class="form-horizontal m-t" id="addForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Logo：</label>
                    <div class="col-sm-8">
                        <!-- <img id="labelimg" src="{{asset('img/p1.jpg')}}"> -->
                        <img id="imgContent" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="inputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="inputImage" class="hide" multiple="false"> 上传图片
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">名称：</label>
                    <div class="col-sm-8">
                        <input id="storename" name="storename" class="form-control" type="text" placeholder="文字标识">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" style="float:left;margin-right: 15px;">分类：</label>
                    <div class="input-group col-sm-8">
                        <select id="kinds" name="kinds" data-placeholder="分类" class="chosen-select form-control" multiple style="width:350px;" tabindex="4">
                            <option value="">分类</option>
                            <option value="110000" hassubinfo="true">北京</option>
                            <option value="120000" hassubinfo="true">天津</option>
                            <option value="130000" hassubinfo="true">河北省</option>
                            <option value="140000" hassubinfo="true">山西省</option>
                            <option value="150000" hassubinfo="true">内蒙古自治区</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">厂家代码：</label>
                    <div class="col-sm-8">
                        <input id="code" name="code" class="form-control" type="text" placeholder="v10597">
                    </div>
                </div>
                <div class="form-group">
                   <label class="col-sm-3 control-label">首字母：</label>
                    <div class="col-sm-2">
                        <input id="first" name="first" class="form-control" type="text" placeholder="Y" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="addsort" name="addsort" class="form-control" type="text" placeholder="0" value="">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="btn_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    修改品牌列表
                </h4>
            </div>
            <form class="form-horizontal m-t" id="editForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Logo：</label>
                    <div class="col-sm-8">
                        <img id="imgContent1" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="inputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="inputImage1" class="hide" multiple="false"> 上传图片
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">BANNER图片：</label>
                    <div class="col-sm-8">
                        <img id="labelimg" src="{{asset('img/p1.jpg')}}">
                        <div class="btn-group">
                            <label title="上传图片" for="inputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 上传图片
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">名称：</label>
                    <div class="col-sm-8">
                        <input id="editname" name="editname" class="form-control" type="text" placeholder="文字标识">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">厂家代码：</label>
                    <div class="col-sm-8">
                        <input id="editcode" name="editcode" class="form-control" type="text" placeholder="v10597">
                    </div>
                </div>
                <div class="form-group">
                   <label class="col-sm-3 control-label">首字母：</label>
                    <div class="col-sm-2">
                        <input id="editfirst" name="editfirst" class="form-control" type="text" placeholder="Y" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="editsort" name="editsort" class="form-control" type="text" placeholder="0" value="">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="btn_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>
    <script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
    <script src="{{asset('js/plugins/chosen/chosen.jquery.js')}}"></script>
    <script src="{{asset('js/plugins/webuploader/webuploader.min.js')}}"></script>
    <script type="text/javascript">
        // 添加全局站点信息
        var BASE_URL = 'js/plugins/webuploader';
    </script>
    <script src="{{asset('js/demo/webuploader-demo.js')}}"></script>
    <script>
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none"
        });
        $(document).ready(function () {
             //新增上传图片
            function upload(file){
                var reader = new FileReader();  
                //创建文件读取相关的变量  
                var imgFile;  
                //为文件读取成功设置事件  
                reader.onload=function(e) {  
                    imgFile = e.target.result;  
                    $("#imgContent").attr('src', imgFile);  
                };  
                //正式读取文件  
                reader.readAsDataURL(file);  
            }
            $('#inputImage').on('change',function(e) {
                upload(this.files[0]);
            })
            //编辑上传图片
            function upload(file){
                var reader = new FileReader();  
                //创建文件读取相关的变量  
                var imgFile;  
                //为文件读取成功设置事件  
                reader.onload=function(e) {  
                    imgFile = e.target.result;  
                    $("#imgContent1").attr('src', imgFile);  
                };  
                //正式读取文件  
                reader.readAsDataURL(file);  
            }
            $('#inputImage1').on('change',function(e) {
                upload(this.files[0]);
            })
            var edit_id = 0;//修改列表的id
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";
            //新增
            $("#addForm").validate({
                rules: {
                    bannerImage: "required",
                    storename: "required",
                    kinds: "required",
                    code: "required",
                    first: "required",
                    addsort: "required"
                },
                messages: {
                    storename: icon + "请输入商品名称",
                    kinds: icon + "请输入商品分类",
                    code: icon + "请输入厂家代码",
                    first: icon + "请输入首字母",
                    addsort:icon + "请输入排序"
                },
                submitHandler:function(form){
                    var bannerImage = $('#bannerImage').val();
                    var storename = $('#storename').val();
                    var kinds = $('#kinds').val();
                    var code = $('#code').val();
                    var first = $('#first').val();
                    var addsort = $('#addsort').val();
                    $.ajax({
                        url : '',
                        type : 'post',
                        contentType : "json",
                        data : {},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });

            $('#editModal').on('show.bs.modal', function (e) {
                edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id
            })
            //编辑
            $("#editForm").validate({
                rules: {
                    editname: "required",
                    editcode: "required",
                    editfirst: "required",
                    editsort: "required"
                },
                messages: {
                    editname: icon + "请输入商品名称",
                    editcode: icon + "请输入厂家代码",
                    editfirst: icon + "请输入备注",
                    editsort: icon + "请输入排序"
                },
                submitHandler:function(form){
                    var editname = $('#editname').val();
                    var editcode = $('#editcode').val();
                    var editfirst = $('#editfirst').val();
                    var editsort = $('#editsort').val();
                    $.ajax({
                        url : '',
                        type : 'post',
                        contentType : "json",
                        data : {},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });
        //删除
              $('.del').click(function(){
                var id = $(this).attr('data-id');
                layer.confirm('是否删除？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function (index) {
                    $.ajax({
                        url: '',
                        type: 'GET',
                        dataType: 'json',
                        data: {'id': id},
                        success: function (data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }, function (index, layero) {
                    layer.close(index);
                });
            })
        });
        $(".chosen-select").chosen({width: "92%"});
       $(function (e) {
        var member_img = null ;
        $("#uploadForm").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: "",
                type: "POST",
                data: ,
                contentType: false,
                cache: false,
                processData: false,
                // 显示加载图片
                beforeSend: function () {
                    $('.uploaded-image').attr('src', 'http://www.muyesanren.com/loading.gif');
                },
                success: function (res) {
                    if (res.status == 0){
                        member_img = res.path
                        $('.uploaded-image').attr('src', res.path)
                    } else {

                    }
                },
                error: function () { }
            });
        });
    })
    </script>
@endsection
